<template>
	<view class="container">
		<view class="head">
			<view class="venue">
				<view class="venue-box" @click="showVenueSelectBox">
					<view class="venue-title ellipsis">{{nowStartingPlaceInfo?.terminalPointName}}</view>
					<image src="@/static/img/common/drop-down.png" class="icon"></image>
				</view>
				<scroll-view scroll-y class="venue-select-box" v-if="isShowVenueSelectBox">
					<view class="venue-item" :class="item.id == nowStartingPlaceInfo.id && 'active'"
						v-for="item in venueList" :key="item.id" @click="changeVenue(item)">
						{{item.terminalPointName}}
					</view>
				</scroll-view>
				<view class="addr">
					{{nowLocation}}
				</view>
			</view>
			<view class="items">
				<view class="item">
					<view class="left">
						<view class="title">
							{{orderType==1?'今日收料方量':'今日出料方量'}}
						</view>
						<view class="num">
							{{volume}}
						</view>
					</view>
					<image src="@/static/img/consumption/square.png" class="icon"></image>
				</view>
				<view class="item item2">
					<view class="left">
						<view class="title">
							{{orderType==1?'今日收料趟次':'今日出料趟次'}}
						</view>
						<view class="num">
							{{number}}
						</view>
					</view>
					<image src="@/static/img/consumption/cart.png" class="icon"></image>
				</view>
			</view>
			<view class="list-count">
				<text v-if="nowMaterialBtn=='收料'">待确定列表({{total}})</text>
				<text v-else>今日出料列表({{total}})</text>
			</view>
			<view class="search-box">
				<image src="/static/img/common/search.png" class="icon"></image>
				<input class="search-input" placeholder="车牌号" v-model='carNumber' />
				<view class="search-btn" @click="search">搜索</view>
			</view>
		</view>
		<scroll-view scroll-y class="sign-list" v-if="nowMaterialBtn=='收料'" @scrolltolower="loadMore">
			<ReceivingItem v-for="item in signList" :key="item.id" :sign-info="item"
				@signBtnClick="signConfirmBtn(item)" @signClick="receivingItemClick(item)" />
			<up-empty mode="list" text='还没有数据' :show='signList.length==0' textSize='25' iconSize='25' width='200'
				height='200' icon="http://cdn.uviewui.com/uview/empty/list.png">
			</up-empty>
			<up-loadmore :status="status" v-show='signList.length>10' :loading-text="loadingText"
				:loadmore-text="loadmoreText" :nomore-text="nomoreText" />
		</scroll-view>
		<scroll-view scroll-y class="sign-list" v-else @scrolltolower="loadMore">
			<DischargingItem v-for="item in signList" :key="item.id" :sign-info="item"
				@signClick="dischargingItemClick(item)" />
			<up-empty mode="list" text='还没有数据' :show='signList.length==0' textSize='25' iconSize='25' width='200'
				height='200' icon="http://cdn.uviewui.com/uview/empty/list.png">
			</up-empty>
			<up-loadmore :status="status" v-show='signList.length>10' :loading-text="loadingText"
				:loadmore-text="loadmoreText" :nomore-text="nomoreText" />
		</scroll-view>
		<view class="bottom-box">
			<ButtonBox :btn-arr="materialBtnArr" @btnClick="changeMaterial" />
		</view>
		<view class="billing" @click="addNewMaterial" v-if="userStore.fieldArea=='4'&&orderType=='1'">
			<uni-icons type="plusempty" size="30" color="#2E87FF"></uni-icons>
			<view class="name">
				{{orderType==1?'补录':'开单'}}
			</view>
		</view>
		<view class="billing" @click="addNewMaterial" v-if="orderType!='1'">
			<uni-icons type="plusempty" size="30" color="#2E87FF"></uni-icons>
			<view class="name">

				{{orderType==1?'补录':'开单'}}
			</view>
		</view>
		<!-- 提示弹窗 -->
		<messageTip ref="myMessage" />
		<!-- 非名录车弹窗 -->
		<NotDirectoryPopup v-if="isShowNotDirectoryPopup" @btnClick="notDirectoryBtnClick" />
	</view>
</template>

<script setup lang="ts">
	import { onMounted, computed, ref } from 'vue';
	import ReceivingItem from '@/components/consumption/receivingItem/receivingItem.vue'
	import DischargingItem from '@/components/consumption/dischargingItem/dischargingItem.vue'
	import NotDirectoryPopup from '@/components/consumption/notDirectoryPopup/notDirectoryPopup.vue'

	import * as consumptionApi from "@/api/consumption/consumption.js"
	import { getReceiveType, getOutCounts } from "@/api/consumption/goodsReceipt.js"
	import ButtonBox from '@/components/buttonBox/buttonBox.vue';
	import { useConsumptionStore, useUserStore } from '@/stroes';
	import {
		onShow
	} from "@dcloudio/uni-app"
	// 加载状态
	const status = ref('loadmore');
	const loadingText = ref('努力加载中');
	const loadmoreText = ref('轻轻上拉');
	const nomoreText = ref('实在没有了');
	// 消纳端仓库
	const consumptionStore = useConsumptionStore()
	// 用户仓库
	const userStore = useUserStore();
	// 消息提示
	const myMessage = ref()
	// 当前场所
	const nowLocation = computed(() => {
		let text = '';
		switch (Number(userStore.fieldArea)) {
			case 4:
				text = '原料区'
				break;
			case 5:
				text = '生产区'
				break;
			case 6:
				text = '成品区'
				break;
		}
		return text
	})

	// 按钮数组
	const materialBtnArr = ['收料', '出料']
	const orderType = ref('1')
	const nowMaterialBtn = ref('收料')

	// 签收列表
	const signList = ref([])
	// 车牌号
	const carNumber = ref('')
	// 区域
	const fieldArea = ref(userStore.fieldArea)
	const page = ref({
		currentPage: 1, // 当前页数
		pageSize: 10, // 每页显示多少条
	});
	// 是否显示非名录车弹窗
	const isShowNotDirectoryPopup = ref(false)
	// 当前触发非名录车弹窗元素
	const notDirectoryEl = ref('button')
	// 当前触发非名录车弹窗的信息
	const notDirectoryInfo = ref(null)

	// 是否显示起点名称选择框
	const isShowVenueSelectBox = ref(false)
	// 起点名称列表
	const venueList = computed(() => {
		return consumptionStore.venueList
	})

	// 当前起点名称信息
	const nowStartingPlaceInfo = computed(() => {
		return consumptionStore.nowVenue
	})
	// 显示/隐藏起点名称选择框
	const showVenueSelectBox = () => {
		isShowVenueSelectBox.value = !isShowVenueSelectBox.value
	}
	// 修改起点名称
	const changeVenue = (item) => {
		consumptionStore.nowVenue = item
		isShowVenueSelectBox.value = false
	}

	// 收料item 点击
	function receivingItemClick(item) {
		/* console.log(item, '9999999999');
		return */
		if (item.startingPlace == '') {
			consumptionStore.info = item
			// 信息补全
			uni.navigateTo({
				url: '/pages/consumption/informationCompletion/informationCompletion'
			})
		} else {
			goToPage('item', item)
		}
	}
	// 收料签收确认按钮点击
	function signConfirmBtn(item) {
		console.log('按钮点击了', item);
		/* alertDialog.value.open()
		return */
		consumptionStore.info = item
		// item.startingPlace = ''
		if (item.startingPlace == '') {
			// 信息补全
			uni.navigateTo({
				url: '/pages/consumption/informationCompletion/informationCompletion'
			})
		} else {
			// 名录车和非名录车

			if (item.directory == '名录车') {
				goToPage('button', item)
			} else {
				notDirectoryEl.value = 'button'
				notDirectoryInfo.value = item
				isShowNotDirectoryPopup.value = true

			}
		}
		// 2.未接地磅签收
		/* uni.navigateTo({
			url: '/pages/consumption/receivingConfirm2/receivingConfirm2'
		}) */
		//  3.接地磅签收
		/* uni.navigateTo({
			url: '/pages/consumption/receivingConfirm3/receivingConfirm3'
		}) */


	}
	// 出料item点击
	function dischargingItemClick(item) {
		// console.log('出料item', item);
		uni.navigateTo({
			url: '/pages/consumption/dischargingItemConfirm/dischargingItemConfirm?id=' + item.orderId
		})

	}
	// 改变物料类型
	function changeMaterial(btn) {
		// console.log(btn)
		nowMaterialBtn.value = btn
		carNumber.value = ''
		signList.value = []
		if (btn == '收料') {
			orderType.value = "1"
			getreCount()
		} else {
			orderType.value = "2"
			getOutCount()
		}
		page.value.currentPage = 1
		initPage()
	}
	// 新增物料
	function addNewMaterial() {
		if (nowMaterialBtn.value == '收料') {
			uni.navigateTo({
				url: '/pages/consumption/addNewReceiving/addNewReceiving'
			})
		} else {
			// fieldArea 4--原料区  5--生产区  6--成品区
			// console.log("userStore.fieldArea", userStore.fieldArea)
			uni.navigateTo({
				url: '/pages/consumption/addNewDischarging1/addNewDischarging1'
			})
			// return
			// let nums = parseInt(userStore.fieldArea)
			// switch (nums) {
			// 	case 4:
			// 		uni.navigateTo({
			// 			url: '/pages/consumption/addNewDischarging/addNewDischarging'
			// 		})
			// 		break;
			// 	case 5:
			// 		uni.navigateTo({
			// 			url: '/pages/consumption/addNewDischarging3/addNewDischarging3'
			// 		})
			// 		break;
			// 	case 6:
			// 		uni.navigateTo({
			// 			url: '/pages/consumption/addNewDischarging2/addNewDischarging2'
			// 		})
			// 		break;
			// 	default:
			// 		break;
			// }

		}
	}
	// 搜索
	function search() {
		page.value.currentPage = 1
		initPage()
	}
	// 分页
	const total = ref(0)

	function initPage() {
		let obj = {
			orderType: orderType.value,
			carNumber: carNumber.value,
			current: page.value.currentPage,
			size: page.value.pageSize,
			receiveType: fieldArea.value,
			userArea: userStore.fieldArea,
		}
		uni.hideLoading()
		uni.showLoading({
			title: '数据加载中...'
		})
		/* // 根据用户id获取起点名称列表
		consumptionApi.getTerminalByUserId(userStore.accountInfo['user_id']).then(res => {
			// console.log('起点名称列表', res);
			if (res.data.code == 0) {
				venueList.value = res.data.data
				consumptionStore.startingPlaceInfo = res.data.data[0]
			}
		}) */
		consumptionApi.getList(obj).then(res => {
			uni.hideLoading()
			if (res.data.code == 0) {
				console.log("分页参数", res.data.data)
				total.value = res.data.data.total
				if (page.value.currentPage == 1) signList.value = [];
				signList.value = signList.value.concat(res.data.data.records);
			} else {
				console.log("失败")
			}
		})
	}
	const volume = ref(0)
	const number = ref(0)
	// 统计出料
	function getOutCount() {
		let obj = {}
		getOutCounts(obj).then(res => {
			if (res.data.code == 0) {
				console.log("出料", res.data.data)
				volume.value = res.data.data.volume
				number.value = res.data.data.number
			} else {
				console.log("失败")
			}
		})
	}
	// getOutCount()
	// 统计收料
	function getreCount() {
		let obj = {}
		getReceiveType(obj).then(res => {
			console.log("收料", res)
			if (res.data.code == 0) {
				console.log("收料", res.data.data)
				volume.value = res.data.data.volume
				number.value = res.data.data.number
			} else {
				console.log("失败")
			}
		})
	}
	getreCount()

	// 加载更多
	function loadMore() {
		if (total.value == signList.value.length) {
			status.value = 'nomoreText';
			myMessage.value.open('error', '已经到底了哦！')
			return
		}
		page.value.currentPage = page.value.currentPage + 1
		status.value = 'loadingText';
		initPage()
		console.log("加载更多")
	}
	// 获取地址信息 getInfoUser
	function getAddress() {
		let obj = {
			userId: userStore.accountInfo['user_id']
		}
		// console.log("userStoreuserStore",userStore.userInfo)
		// console.log("accountInfo",userStore.accountInfo['user_id'])

		consumptionApi.getInfoUser(obj).then(res => {

			if (res.data.code == 0) {
				console.log("用户信息", res.data.data)

			} else {
				console.log("失败")
			}
		})
	}
	getAddress()

	// 非名录车弹窗点击
	function notDirectoryBtnClick(data) {
		// console.log(data, 'uuuuu');
		isShowNotDirectoryPopup.value = false
		if (data == 1) {
			if (notDirectoryEl.value == 'button') {
				goToPage('button', notDirectoryInfo.value)
			} else if (notDirectoryEl.value == 'item') {
				goToPage('item', notDirectoryInfo.value)
			}
		}
	}
	// 跳转签收页面
	function goToPage(type, item) {
		consumptionStore.info = item
		/* console.log('item信息', item);
		return */
		if (type === 'button') {
			// 内转-签收
			/* uni.navigateTo({
				url: '/pages/consumption/receivingConfirm/receivingConfirm'
			})
			return */
			if (item.orderEnd == '2') {
				uni.navigateTo({
					url: '/pages/consumption/receivingConfirm/receivingConfirm'
				})
			} else {
				// 暂时都跳转未接地磅
				uni.navigateTo({
					url: '/pages/consumption/receivingConfirm2/receivingConfirm2'
				})
			}
		} else if (type === 'item') {
			// consumptionStore.info = item
			/* uni.navigateTo({
				url: '/pages/consumption/receivingItemConfirm/receivingItemConfirm?id=' + item.orderId
			})
			return */
			// 内转联单详情
			if (item.orderEnd == '2') {
				uni.navigateTo({
					url: '/pages/consumption/receivingItemConfirm/receivingItemConfirm?id=' + item.orderId
				})
			} else {
				uni.navigateTo({
					url: '/pages/consumption/receivingItemConfirm2/receivingItemConfirm2?id=' + item.orderId
				})
			}
		}
	}

	onShow(() => {
		if (userStore.nowPageId === 0) {
			initPage()
			if (orderType.value == "1") {
				getreCount()
			} else {
				// orderType.value = "2"
				getOutCount()
			}
		}
	})
	onMounted(() => {
		initPage()
		uni.$on('updata', function (data : any) {

			// initPage()
			// if (orderType.value = "1") {
			// 	getreCount()
			// } else {
			// 	// orderType.value = "2"
			// 	getOutCount()
			// }
		})
	});
</script>

<style scoped lang="scss">
	.head {
		position: relative;
		height: 432rpx;
		margin-bottom: 40rpx;
		padding: 100rpx 32rpx 0rpx;
		color: $default-color;
		background: url('@/static/img/consumption/head-bg.png') no-repeat no-repeat center/ 100% 100%;
		box-sizing: border-box;

		.venue {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			font-size: 32rpx;
			color: #fff;

			.venue-box {
				display: flex;
				align-items: center;
				// margin-right: 20rpx;
			}

			.ellipsis {
				white-space: nowrap;
				/* 确保文本在一行内显示 */
				overflow: hidden;
				/* 隐藏超出容器的内容 */
				text-overflow: ellipsis;
				/* 使用省略号表示被截断的文本 */
				max-width: 200rpx;
				/* 设置最大宽度，确保文本超出时生效 */
			}

			.icon {
				margin-left: 10rpx;
				width: 26rpx;
				height: 18rpx;
			}

			.venue-select-box {
				position: absolute;
				bottom: -260rpx;
				left: 0;
				width: 600rpx;
				height: 240rpx;
				color: #000;
				background-color: #fff;
				border-radius: 8rpx;
				z-index: 999;
				padding: 20rpx;
				box-sizing: border-box;

				.venue-item {
					margin: 10rpx;

					&.active {
						color: $primary-color;
					}

					&:hover {
						color: $primary-color;
					}
				}
			}
		}

		.items {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.item {
				// flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 30rpx 30rpx;
				width: 332rpx;
				height: 148rpx;
				background: url('@/static/img/consumption/item-head01.png') no-repeat center/ 100% 100%;
				border-radius: 8rpx;
				overflow: hidden;
				box-sizing: border-box;

				&.item2 {
					background-image: url('@/static/img/consumption/item-head02.png');
				}

				.left {
					margin-right: 44rpx;

					.title {
						font-size: 28rpx;
						margin-bottom: 12rpx;
					}

					.num {
						font-size: 36rpx;
					}
				}


				.icon {
					width: 60rpx;
					height: 52rpx;
					// margin-right: 30rpx;
				}
			}
		}

		.list-count {
			margin-bottom: 20rpx;
			font-weight: 500;
			font-size: 32rpx;
			line-height: 38rpx;
		}

		.search-box {
			position: absolute;
			left: 32rpx;
			bottom: -60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 24rpx 22rpx;
			width: 686rpx;
			background-color: #fff;
			border-radius: 8rpx;
			box-sizing: border-box;

			.icon {
				margin-right: 6rpx;
				width: 27rpx;
				height: 27rpx;
			}

			.search-input {
				flex: 1;
				font-size: 24rpx;
			}

			.search-btn {
				border-left: 2rpx solid rgba(152, 157, 165, 0.1);
				padding-left: 16rpx;
				font-size: 28rpx;
				color: $primary-color;
			}

		}
	}

	.sign-list {
		height: 874rpx;
		padding: 40rpx 32rpx 20rpx;
		overflow: hidden;
		box-sizing: border-box;
	}

	.bottom-box {
		position: fixed;
		left: 0;
		bottom: 162rpx;

		width: 750rpx;
		width: 100%;
		padding: 18rpx 32rpx;
		background-color: #fff;
		box-sizing: border-box;


		.bottom-btns {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 76rpx;
			color: $info-color;
			border-radius: 48rpx;
			background: #EFF6FE;
			box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.04);
			box-sizing: border-box;

			.btn {
				width: 100%;
				height: 60rpx;
				margin: 8rpx 10rpx;
				font-size: 28rpx;
				color: $info-color;
				text-align: center;
				line-height: 60rpx;
				border-radius: 56rpx;
				box-sizing: border-box;

				&.active {
					color: #fff;
					background-color: $primary-color;
				}
			}
		}
	}

	.billing {
		position: fixed;
		right: 32rpx;
		bottom: 276rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 116rpx;
		height: 116rpx;
		font-size: 24rpx;
		color: $primary-color;
		border-radius: 50%;
		background-color: #fff;
	}
</style>